<template>
  <div class="num">
    <div class="content">
      <div class="title">截至{{ covData.modifyTime|time}}全国数据统计</div>
      <ul class="wrap">
        <li>
          <span>较昨日<i>{{covData.today.confirm|Number}}</i></span>
          <div class="bold">{{covData.total.confirm|division}}</div>
          <strong>现存确诊</strong>
        </li>
        <li>
          <span>较昨日<i>{{covData.today.input|Number}}</i></span>
          <div class="bold">{{covData.total.input|division}}</div>
          <strong>境外输入</strong>
        </li>
        <li>
          <span>较昨日<i>{{covData.today.dead|Number}}</i></span>
          <div class="bold">{{covData.total.dead|division}}</div>
          <strong>累计死亡</strong>
        </li>
        <li>
          <span>较昨日<i>{{covData.today.heal|Number}}</i></span>
          <div class="bold">{{covData.total.heal|division}}</div>
          <strong>累计治愈</strong>
        </li>
      </ul>
    </div>

  </div>
</template>

<script>
import moment from 'moment'
export default {
  props: ['covData'],
  // 过滤器
  filters: {
    Number: function(val) {
      val = val > 0 ? '+' + val : val
      return val
    },
    // 处理时间格式
    time(val, format = 'YYYY-MM-DD HH:mm:ss') {
      return moment(val).format(format)
    },
    // 每三位加逗号
    division(num) {
      if (num === undefined) return ''
      return num.toLocaleString()
    }
  }
}
</script>

<style lang="less" scoped>
.num {
  background-color: #f5f5f5;
  padding-top: 0.2rem;
  .content {
    background-color: #fff;
    height: 2rem;
    padding: 0.3rem;
    min-height: 2rem;
    border-radius: 0.2rem 0.2rem 0 0;
    .title {
      color: #666;
      margin-bottom: 0.2rem;
    }
  }
  .wrap {
    display: flex;
    flex-wrap: wrap;
    border-radius: 0.1rem;
    box-shadow: 0 0 3px 2px rgba(198, 196, 196, 0.2);
    li {
      margin-bottom: 0.2rem;
      width: 33.333333%;
      text-align: center;
      color: #666;
      .strong {
        color: #333;
      }
    }
    .bold {
      font-weight: bold;
    }
    li:nth-child(1) .bold {
      color: red;
    }
    li:nth-child(1) {
      i {
        color: black;
      }
    }
    li:nth-child(2) .bold {
      color: green;
    }
    li:nth-child(2) {
      i {
        color: burlywood;
      }
    }
    li:nth-child(3) .bold {
      color: orange;
    }
    li:nth-child(3) {
      i {
        color: red;
      }
    }
    li:nth-child(4) .bold {
      color: powderblue;
    }
    li:nth-child(4) {
      i {
        color: green;
      }
    }
    li:nth-child(5) .bold {
      color: palevioletred;
    }
    li:nth-child(5) {
      i {
        color: blue;
      }
    }
    li:nth-child(6) .bold {
      color: peru;
    }
    li:nth-child(6) {
      i {
        color: green;
      }
    }
  }
}
</style>
